<template>
  <div class="manageinfo">
    <p>管理员信息</p>
    <p>
      管理员ID:<span>{{ userid }}</span>
    </p>
    <p>
      帐号:<span>{{ accountname }}</span>
    </p>
    <p>
      用户组:<span>{{ usergroup }}</span>
    </p>
    <p>
      创建时间:<span>{{ nowtime }}</span>
    </p>
    <div class="manageimg" style="display: flex; align-items: center">
      <span>管理员头像:</span>
      <div>
        <img :src="myimg" />
      </div>
    </div>
    <div style="display: flex; align-items: center">
      <p style="border: 0; margin-right: 20px">更改头像:</p>
      <el-upload
        style="
          border: 1px dashed #d9d9d9;
          border-radius: 50%;
          width: 100px;
          height: 100px;
        "
        class="avatar-uploader"
        action="http://127.0.0.1:5000/users/avatar_upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :data="thisdata"
      >
        <img
          v-if="imageUrl"
          :src="imageUrl"
          class="avatar"
          style="border-radius: 50%"
        />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <el-button type="danger" class="outlogin" @click="open">退出登录</el-button>
  </div>
</template>

<script>
// 引入ajax获取账号信息
import { getinfo } from "@/apis/user.js";

import { YMD, bus } from "@/utils/utils.js";

export default {
  //   data:
  // accountInfo:
  // account: "雷航"
  // ctime: "2021-07-08T10:44:48.000Z"
  // id: 156
  // imgUrl: "http://127.0.0.1:5000/upload/imgs/acc_img/default.jpg"
  // userGroup: "超级管理员
  methods: {
    handleAvatarSuccess(res, file) {
      this.myimg = URL.createObjectURL(file.raw);
      this.imageUrl = URL.createObjectURL(file.raw);
      // 传送数据,'数据号码',数据值
      bus.$emit("changeimg", this.myimg);
    },
    // 点击退出登录
    open() {
      this.$confirm("是否退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "退出登录成功!",
          });
          // 清空当前账户所有信息,单独remove那个token也可以
          localStorage.clear();
          this.$router.push("/");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出登录",
          });
        });
    },
  },
  created() {
    getinfo({
      id: localStorage.getItem("info"),
    }).then((res) => {
      // console.log(res);
      this.accountname = res.data.accountInfo.account;
      this.userid = res.data.accountInfo.id;
      this.usergroup = res.data.accountInfo.userGroup;
      this.myimg = res.data.accountInfo.imgUrl;
      this.nowtime = YMD(res.data.accountInfo.ctime);
    });
  },
  data() {
    return {
      thisdata: { id: localStorage.getItem("info") },
      imageUrl: "",
      accountname: "",
      userid: "",
      usergroup: "",
      nowtime: "",
      myimg: "",
    };
  },
};
</script>

<style lang="less" scoped>
.manageinfo {
  top: 0;
  left: 0;
  // background-image: url(../../../assets/imgs/bapic.jpg);
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
  margin: 20px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 0 20px 20px 20px;
  position: relative;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  p {
    line-height: 50px;
    border-bottom: 1px solid #ccc;
    span {
      margin-left: 20px;
    }
  }
  .manageimg {
    display: flex;
    line-height: 100px;
    margin-top: 20px;
    img {
      width: 100px;
      height: 100px;
      margin-left: 10px;
      border-radius: 50%;
    }
  }
  .avatar-uploader .el-upload {
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  .outlogin {
    width: 100px;
  }
}
</style>